§ Fox 3.0 Router 导航守卫

fox router导航守卫可以提供公共的导航动作拦截处理，能够用于权限控制，埋点记录等

例子代码：sites/example/pages/guard

§ 前置守卫

 //before filter
  fox.router.beforeEach((to: Route, from: Route, next: { (...args: any[]): void }, session: any) => {
      session.data['id'] = new Date().getTime();
      if (to.path === '/dog') {
         next(false)
      } else {
         next()
      }
 })

1
2
3
4
5
6
7
8
9

路由导航前触发before filter，守卫是异步解析执行，必须调用next方法，才能继续导航进程。

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(route): 重定向路由
next(false): 中断当前的导航
from 路由对应的地址。
session: 可以用于设置导航会话，会话能够给before filter、after filer和destroy filter共享

§ 后置守卫

//after filter
fox.router.afterEach((to: Route, from: Route, session: any) => {
     console.info(`after to:${to.path}, from:${from ? from.path : 'unknown'}, id:${session.data && session.data['id']}`);
 })

1
2
3
4

路由导航完成后触发该filter，该过滤器为同步函数

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
session: 可以用于设置导航会话，会话能够给before filter、after filer和destroy filter共享

§ 销毁守卫

//destroy filter
fox.router.destroyEach((route: Route, session: any) => {
    console.info(`destroy route:${route.path}, id:${session.data && session.data['id']}`);
})

1
2
3
4

页面销毁时触发该filter，该过滤器为同步函数

route: Route: 销毁页面对于的route
session: 可以用于设置导航会话，会话能够给before filter、after filer和destroy filter共享

← 参数传递过渡动画 →